<!-- 我的订单 -- 外部带标签简略列表 -->
<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first">
        <el-container v-for="l in list" :key="l.orderId">
          <el-header>{{ l.orderName }}</el-header>
          <hr />
          <el-main>
            <p>订单号：{{ l.orderNumber }}</p>
            <br />
            <p v-if="l.orderStatus == 0">订单状态：待支付</p>
            <p v-if="l.orderStatus == 1">订单状态：已取消</p>
            <p v-if="l.orderStatus == 2">订单状态：已支付</p>
            <p v-if="l.orderStatus == 3">订单状态：已退款</p>
            <p v-if="l.orderStatus == 5">订单状态：已完成</p>
            <br />
            <p>服务商：{{ l.orderMerchatName }}</p>
            <br />
            <p>订单金额：{{ l.orderTotalAmount }}</p>
            <br />
          </el-main>
          <el-footer>
            <!-- 0-1，0-2，2-3，2-5 -->
            <el-button
              type="primary"
              plain
              v-if="l.orderStatus == 0"
              @click="cancelOrder(l.orderId)"
              >取消</el-button
            >
            <el-button
              type="primary"
              plain
              v-if="l.orderStatus == 0"
              @click="completePayment(l.orderId)"
              >支付</el-button
            >
            <el-button
              type="primary"
              plain
              v-if="l.orderStatus == 2"
              @click="cancelPayment(l.orderId)"
              >退款</el-button
            >
            <el-button
              type="primary"
              plain
              v-if="l.orderStatus == 2"
              @click="completeOrder(l.orderId)"
              >完成</el-button
            >
          </el-footer>
          <hr />
        </el-container>
      </el-tab-pane>
      <el-tab-pane label="待支付" name="second">
        <el-container v-for="l in list" :key="l.orderId">
          <el-header>{{ l.orderName }}</el-header>
          <hr />
          <el-main>
            <p>订单号：{{ l.orderNumber }}</p>
            <br />
            <p v-if="l.orderStatus == 0">订单状态：待支付</p>
            <p v-if="l.orderStatus == 1">订单状态：已取消</p>
            <p v-if="l.orderStatus == 2">订单状态：已支付</p>
            <p v-if="l.orderStatus == 3">订单状态：已退款</p>
            <p v-if="l.orderStatus == 5">订单状态：已完成</p>
            <br />
            <p>服务商：{{ l.orderMerchatName }}</p>
            <br />
            <p>订单金额：{{ l.orderTotalAmount }}</p>
            <br />
          </el-main>
          <el-footer>
            <!-- 0-1，0-2，2-3，2-5 -->
            <el-button
              type="primary"
              plain
              v-if="l.orderStatus == 0"
              @click="cancelOrder(l.orderId)"
              >取消</el-button
            >
            <el-button
              type="primary"
              plain
              v-if="l.orderStatus == 0"
              @click="completePayment(l.orderId)"
              >支付</el-button
            >
            <el-button
              type="primary"
              plain
              v-if="l.orderStatus == 2"
              @click="cancelPayment(l.orderId)"
              >退款</el-button
            >
            <el-button
              type="primary"
              plain
              v-if="l.orderStatus == 2"
              @click="completeOrder(l.orderId)"
              >完成</el-button
            >
          </el-footer>
          <hr />
        </el-container>
      </el-tab-pane>
      <el-tab-pane label="已取消" name="third">
        <el-container v-for="l in list" :key="l.orderId">
          <el-header>{{ l.orderName }}</el-header>
          <hr />
          <el-main>
            <p>订单号：{{ l.orderNumber }}</p>
            <br />
            <p v-if="l.orderStatus == 0">订单状态：待支付</p>
            <p v-if="l.orderStatus == 1">订单状态：已取消</p>
            <p v-if="l.orderStatus == 2">订单状态：已支付</p>
            <p v-if="l.orderStatus == 3">订单状态：已退款</p>
            <p v-if="l.orderStatus == 5">订单状态：已完成</p>
            <br />
            <p>服务商：{{ l.orderMerchatName }}</p>
            <br />
            <p>订单金额：{{ l.orderTotalAmount }}</p>
            <br />
          </el-main>
          <el-footer>
            <!-- 0-1，0-2，2-3，2-5 -->
            <el-button
              type="primary"
              plain
              v-if="l.orderStatus == 0"
              @click="cancelOrder(l.orderId)"
              >取消</el-button
            >
            <el-button
              type="primary"
              plain
              v-if="l.orderStatus == 0"
              @click="completePayment(l.orderId)"
              >支付</el-button
            >
            <el-button
              type="primary"
              plain
              v-if="l.orderStatus == 2"
              @click="cancelPayment(l.orderId)"
              >退款</el-button
            >
            <el-button
              type="primary"
              plain
              v-if="l.orderStatus == 2"
              @click="completeOrder(l.orderId)"
              >完成</el-button
            >
          </el-footer>
          <hr />
        </el-container>
      </el-tab-pane>
      <el-tab-pane label="已支付" name="fourth">
        <el-container v-for="l in list" :key="l.orderId">
          <el-header>{{ l.orderName }}</el-header>
          <hr />
          <el-main>
            <p>订单号：{{ l.orderNumber }}</p>
            <br />
            <p v-if="l.orderStatus == 0">订单状态：待支付</p>
            <p v-if="l.orderStatus == 1">订单状态：已取消</p>
            <p v-if="l.orderStatus == 2">订单状态：已支付</p>
            <p v-if="l.orderStatus == 3">订单状态：已退款</p>
            <p v-if="l.orderStatus == 5">订单状态：已完成</p>
            <br />
            <p>服务商：{{ l.orderMerchatName }}</p>
            <br />
            <p>订单金额：{{ l.orderTotalAmount }}</p>
            <br />
          </el-main>
          <el-footer>
            <!-- 0-1，0-2，2-3，2-5 -->
            <el-button
              type="primary"
              plain
              v-if="l.orderStatus == 0"
              @click="cancelOrder(l.orderId)"
              >取消</el-button
            >
            <el-button
              type="primary"
              plain
              v-if="l.orderStatus == 0"
              @click="completePayment(l.orderId)"
              >支付</el-button
            >
            <el-button
              type="primary"
              plain
              v-if="l.orderStatus == 2"
              @click="cancelPayment(l.orderId)"
              >退款</el-button
            >
            <el-button
              type="primary"
              plain
              v-if="l.orderStatus == 2"
              @click="completeOrder(l.orderId)"
              >完成</el-button
            >
          </el-footer>
          <hr />
        </el-container>
      </el-tab-pane>
      <el-tab-pane label="已退款" name="fifth">
        <el-container v-for="l in list" :key="l.orderId">
          <el-header>{{ l.orderName }}</el-header>
          <hr />
          <el-main>
            <p>订单号：{{ l.orderNumber }}</p>
            <br />
            <p v-if="l.orderStatus == 0">订单状态：待支付</p>
            <p v-if="l.orderStatus == 1">订单状态：已取消</p>
            <p v-if="l.orderStatus == 2">订单状态：已支付</p>
            <p v-if="l.orderStatus == 3">订单状态：已退款</p>
            <p v-if="l.orderStatus == 5">订单状态：已完成</p>
            <br />
            <p>服务商：{{ l.orderMerchatName }}</p>
            <br />
            <p>订单金额：{{ l.orderTotalAmount }}</p>
            <br />
          </el-main>
          <el-footer>
            <!-- 0-1，0-2，2-3，2-5 -->
            <el-button
              type="primary"
              plain
              v-if="l.orderStatus == 0"
              @click="cancelOrder(l.orderId)"
              >取消</el-button
            >
            <el-button
              type="primary"
              plain
              v-if="l.orderStatus == 0"
              @click="completePayment(l.orderId)"
              >支付</el-button
            >
            <el-button
              type="primary"
              plain
              v-if="l.orderStatus == 2"
              @click="cancelPayment(l.orderId)"
              >退款</el-button
            >
            <el-button
              type="primary"
              plain
              v-if="l.orderStatus == 2"
              @click="completeOrder(l.orderId)"
              >完成</el-button
            >
          </el-footer>
          <hr />
        </el-container>
      </el-tab-pane>
      <el-tab-pane label="已完成" name="sixth">
        <el-container v-for="l in list" :key="l.orderId">
          <el-header>{{ l.orderName }}</el-header>
          <hr />
          <el-main>
            <p>订单号：{{ l.orderNumber }}</p>
            <br />
            <p v-if="l.orderStatus == 0">订单状态：待支付</p>
            <p v-if="l.orderStatus == 1">订单状态：已取消</p>
            <p v-if="l.orderStatus == 2">订单状态：已支付</p>
            <p v-if="l.orderStatus == 3">订单状态：已退款</p>
            <p v-if="l.orderStatus == 5">订单状态：已完成</p>
            <br />
            <p>服务商：{{ l.orderMerchatName }}</p>
            <br />
            <p>订单金额：{{ l.orderTotalAmount }}</p>
            <br />
          </el-main>
          <el-footer>
            <!-- 0-1，0-2，2-3，2-5 -->
            <el-button
              type="primary"
              plain
              v-if="l.orderStatus == 0"
              @click="cancelOrder(l.orderId)"
              >取消</el-button
            >
            <el-button
              type="primary"
              plain
              v-if="l.orderStatus == 0"
              @click="completePayment(l.orderId)"
              >支付</el-button
            >
            <el-button
              type="primary"
              plain
              v-if="l.orderStatus == 2"
              @click="cancelPayment(l.orderId)"
              >退款</el-button
            >
            <el-button
              type="primary"
              plain
              v-if="l.orderStatus == 2"
              @click="completeOrder(l.orderId)"
              >完成</el-button
            >
            <el-button
              type="primary"
              plain
              v-if="l.orderStatus == 5"
              @click="writeCom(l)"
              >评价</el-button
            >
          </el-footer>
          <hr />
        </el-container>
      </el-tab-pane>
    </el-tabs>

    <!-- 评价表单 -->
    <el-drawer
      title="写评论"
      :before-close="handleClose"
      :visible.sync="dialog"
      direction="ltr"
      custom-class="demo-drawer"
      ref="drawer"
    >
      <div class="demo-drawer__content">
        <el-form :model="comments">
          <el-form-item label="评分" :label-width="formLabelWidth">
            <el-rate v-model="comments.commentRating" show-text> </el-rate>
          </el-form-item>
          <el-form-item label="评价" :label-width="formLabelWidth">
            <el-input
              v-model="comments.comment"
              autocomplete="off"
              type="textarea"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button
            type="primary"
            @click="$refs.drawer.closeDrawer()"
            :loading="loading"
            >{{ loading ? "提交中 ..." : "确 定" }}</el-button
          >
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "orderoutterlists",
  data() {
    return {
      pageDto: { orders: {} },
      list: [],
      // 其他参数
      activeName: "first",
      // 评价表单
      comments: {},
      dialog: false,
      loading: false,
      formLabelWidth: "80px",
      timer: null,
    };
  },
  methods: {
    // 查询订单
    // 全部
    queryByPage() {
      // 设置基本参数
      this.pageDto.orders.userId = localStorage.getItem("USERID");
      this.$api.ordersApi.queryByPage(this.pageDto).then((res) => {
        this.list = res.data.data.list;
      });
    },
    // 待支付
    noPay() {
      this.pageDto.orders.orderStatus = 0;
      this.queryByPage();
    },
    // 已取消
    cancelPay() {
      this.pageDto.orders.orderStatus = 1;
      this.queryByPage();
    },
    // 已支付
    completePay() {
      this.pageDto.orders.orderStatus = 2;
      this.queryByPage();
    },
    // 已退款
    backPay() {
      this.pageDto.orders.orderStatus = 3;
      this.queryByPage();
    },
    // 已完成
    completed() {
      this.pageDto.orders.orderStatus = 5;
      this.queryByPage();
    },

    // 订单操作
    // 取消
    cancelOrder(id) {
      this.$api.ordersApi.cancelOrder({ orderId: id }).then((res) => {
        if (res.data.code == 0) {
          this.$notify.error({
            title: "失败",
            message: res.data.msg,
          });
        } else {
          this.$notify({
            title: "成功",
            message: res.data.msg,
            type: "success",
          });
          this.queryByPage();
          this.cancelPay();
        }
      });
    },
    // 支付
    completePayment(id) {
      this.$api.ordersApi.completePayment({ orderId: id }).then((res) => {
        if (res.data.code == 0) {
          this.$notify.error({
            title: "失败",
            message: res.data.msg,
          });
        } else {
          this.$notify({
            title: "成功",
            message: res.data.msg,
            type: "success",
          });
          this.queryByPage();
          this.completePay();
        }
      });
    },
    // 退款
    cancelPayment(id) {
      this.$api.ordersApi.cancelPayment({ orderId: id }).then((res) => {
        if (res.data.code == 0) {
          this.$notify.error({
            title: "失败",
            message: res.data.msg,
          });
        } else {
          this.$notify({
            title: "成功",
            message: res.data.msg,
            type: "success",
          });
          this.queryByPage();
          this.backPay();
        }
      });
    },
    // 完成
    completeOrder(id) {
      this.$api.ordersApi.completeOrder({ orderId: id }).then((res) => {
        if (res.data.code == 0) {
          this.$notify.error({
            title: "失败",
            message: res.data.msg,
          });
        } else {
          this.$notify({
            title: "成功",
            message: res.data.msg,
            type: "success",
          });
          this.queryByPage();
          this.completed();
        }
      });
    },

    // element ui
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 评价表单
    // 评价
    writeCom(com) {
      this.dialog = true;
      // 评价表单基础数据设置
      this.comments.userId = localStorage.getItem("USERID");
      this.comments.relatedEntityType = com.transactionType;
      this.comments.relatedEntityId = com.transactionId;
    },
    // 提交表单
    handleClose(done) {
      if (this.loading) {
        return;
      }
      // 提交评论
      this.$api.commentsApi.insertComment(this.comments).then((res) => {
        console.log(res);
      });

      this.$confirm("提交评论")
        .then((_) => {
          this.loading = true;
          this.timer = setTimeout(() => {
            done();
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.loading = false;
            }, 400);
          }, 2000);
        })
        .catch((_) => {});
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer); 
    },
  },
  watch: {
    activeName: {
      immediate: true,
      deep: true,
      handler(newV, oldV) {
        if (newV == "second") this.noPay();
        else if (newV == "third") this.cancelPay();
        else if (newV == "fourth") this.completePay();
        else if (newV == "fifth") this.backPay();
        else if (newV == "sixth") this.completed();
      },
    },
  },
  mounted() {
    this.queryByPage();
  },
};
</script>

<style scoped></style>
